
import React from 'react'

import * as UnitAction  from '../../actions/UnitAction';
import { connect }  from 'react-redux';

class UnitBindDetail extends React.Component {
  constructor(props) {
    super(props)

    this.unit_number = 0;
  }

  componentDidMount() {

  }

  componentDidUpdate() {
    // console.log(this.props.data)
  }

  componentWillReceiveProps(props) {
    if (props.activeDetailId && this.unit_number != props.activeDetailId) {
      this.props.dispatch(
        UnitAction.loadUnitsDetailAsync({unit_number: props.activeDetailId})
      )
      this.unit_number = props.activeDetailId
    }
  }

  renderKerryUserList() {
    var content = [];
    if (this.props.data && this.props.data.user_unit.length > 0) {
      this.props.data.user_unit.forEach(function(data, index) {
        var user = data.kerry_user;
        content.push((
          <tr>
            <td>{data.kerry_user.name}</td>
            <td>{data.kerry_user.mobile}</td>
            <td>{data.kerry_user.reg_code}</td>
          </tr>
        ))
      })
    }
    return content
  }

  renderWechatUserList() {
    var content = [];
    if (this.props.data && this.props.data.user_unit.length > 0) {
      this.props.data.user_unit_binding.forEach(function(data, index) {
        content.push((
          <tr>
            <td>{data.wechat_user.wechatNickname}</td>
            <td>{data.username}</td>
            <td>{data.mobile}</td>
          </tr>
        ))
      })
    }
    return content
  }

  render() {
    var self = this;
    var unit_desc = this.props.data?this.props.data.unit_desc: ""
    return (
      <div className="modal fade" id="unitSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog " role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="unit-modal-label">{unit_desc}户号绑定情况</h4>
            </div>
            <div className="modal-body">
              <div className="setting-list">
                <label>已绑定的业主</label>
                <table className="table">
                  <thead>
                    <tr className="table-title">
                      <th>姓名</th>
                      <th>联系方式</th>
                      <th>账单ID</th>
                    </tr>
                  </thead>
                  <tbody>
                    {this.renderKerryUserList()}
                  </tbody>
                </table>
              </div>
              <div className="setting-list">
                <label>已绑定的微信用户</label>
                <table className="table">
                  <thead>
                    <tr className="table-title">
                      <th>微信昵称</th>
                      <th>姓名</th>
                      <th>联系方式</th>
                    </tr>
                  </thead>
                  <tbody>
                    {this.renderWechatUserList()}
                  </tbody>
                </table>
              </div>
              <input ref="unitId" value={self.props.data?self.props.data.id:""} hidden/>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {

  return {
    data: state.unitDetail.unit,
  }
}


export default connect(mapStateToProps)(UnitBindDetail)
